<style lang="less" scoped>
  /deep/.el-dialog--center .el-dialog__body {
    padding: 22px 30px 55px;
  }
  /deep/.el-form-item__label {
    padding-right: 0;
  }
  /deep/.el-tabs__nav-wrap::after {
    background-color: #FFF;
  }
</style>
<template>
  <el-dialog
    id="homeSendImg"
    title="影像发送"
    :append-to-body='true'
    :visible.sync="homeSendImgShow"
    :before-close="HomeSendImgClose"
    width="900px"
    top="3%"
    center>
    <div class="of">
      <el-form class="of" label-position="right">
        <div class="of fl pb25" style="width: 840px;">
          <div class="fl">
            <el-tabs v-model="activeName" @tab-click="tabsClickFn">
              <el-tab-pane label="全部" name="-1"></el-tab-pane>
              <el-tab-pane label="已发送" name="2"></el-tab-pane>
              <el-tab-pane label="待发送" name="1"></el-tab-pane>
              <el-tab-pane label="发送失败" name="3"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="fr">
            <el-form-item label="发送时间：" label-width="70px" class="fl mr40">
              <search-time
                :initTime="initTime"
                @getTimes="getTimes"
                :clearTime="clearTime"
                style="width: 220px"></search-time>
            </el-form-item>
            <el-button type="primary" @click="searchFn" size="medium" class="fr">查询</el-button>
          </div>
        </div>
        <div style="width: 840px;">
          <el-table :data="tableData" border
                    :header-cell-style="{background: '#F5F5F5',color: '#333'}"
                    highlight-current-row
                    header-row-class-name="strong">
            <el-table-column
              label="序列"
              width="50"
              fixed="left">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="发送状态"
              width="100"
              prop="task_state"
              align="center"
              fixed="left">
              <template slot-scope="scope">
                <span v-if="scope.row.task_state === 2" class="clr_6cc24e">已发送</span>
                <span v-if="scope.row.task_state === 1" class="clr_f08f0b">待发送</span>
                <span v-if="scope.row.task_state === 3" class="clr_ff6f6f">发送失败</span>
              </template>
            </el-table-column>
            <common-table :propData="propData"></common-table>
          </el-table>
        </div>
      </el-form>
      <div v-if="activeName === '-1' || activeName === '3'" slot="footer" class="dialog-footer fr mt50">
        <el-button type="primary" @click="reSendFn" size="medium">重新发送</el-button>
      </div>
    </div>
    <send-img :sendImgShow="sendImgShow" :sendImgData="sendImgData" @SendImgClose="SendImgClose"/>
  </el-dialog>
</template>

<script>
import CommonTable from '@/components/common/CommonTable'
import SearchTime from '../../common/SearchTime'
import SendImg from '@/components/pacs/commonDialog/SendImg' // 影像发送 弹框

export default {
  data () {
    return {
      activeName: '-1',
      initTime: [],
      searchStartTime: '',
      searchEndTime: '',
      clearTime: false,
      propData: [
        {
          prop: 'other_patient_name',
          label: '患者姓名'
        },
        {
          prop: 'modalities_in_study',
          label: '检查类型'
        },
        {
          prop: 'accession_number',
          label: '检查编号',
          width: 120
        },
        {
          prop: 'study_date_time',
          label: '检查时间',
          width: 160
        },
        {
          prop: 'study_description',
          label: '检查描述',
          width: 180
        }
      ], // table表格原始表头数据
      tableData: [],
      // tableHeight: 300,
      sendImgShow: false,
    }
  },
  props: ['homeSendImgShow'],
  computed: {
    sendImgData() {
      return this.tableData.filter(ele => ele.task_state === 3)
    }
  },
  methods: {
    HomeSendImgClose () {
      this.$emit('HomeSendImgClose', '')
    },
    tabsClickFn (tab, event) {
      console.log(this.activeName)
      this.sendImgListInfo()
    },
    getTimes (val) {
      console.log(val)
      if (val && val.length === 2) {
        this.searchStartTime = val[0]
        this.searchEndTime = val[1]
      } else {
        this.searchStartTime = ''
        this.searchEndTime = ''
      }
    },
    searchFn () {
      this.sendImgListInfo()
    },
    reSendFn () {
      if(this.activeName === '-1' || this.activeName === '3') { // 全部 | 发送失败
        if(this.sendImgData.length === 0) {
          this.$message({
            type: 'warning',
            message: '没有发送失败的影像，无需重新发送'
          })
          return
        }
        this.sendImgShow = true
      }
    },
    async sendImgListInfo() {
      let res = await this.$pacsApi.pacsApi.sendImgListInfo({
        task_state: parseInt(this.activeName),
        start_time: this.searchStartTime,
        end_time: this.searchEndTime
      })
      let { code, data } = res
      if(code === 0) {
        this.tableData = data
      }
    },
    SendImgClose () {
      this.sendImgShow = false
    },
  },
  watch: {
    homeSendImgShow(newVal) {
      if(newVal) {
        this.sendImgListInfo()
      }
    }
  },
  components: {
    CommonTable,
    SearchTime,
    SendImg
  }
}
</script>
